<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb>
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>经典项目</el-breadcrumb-item>
			<el-breadcrumb-item>经典项目</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- card -->
		<el-card>
			<div class="box">
				<div class="top">
					<el-tooltip class="item" effect="dark" content="经典项目" placement="top-start">
						<el-button style="background-color:cornflowerblue"><big>经典项目</big></el-button>
					</el-tooltip>
				</div>
			</div>

			<el-table :data="nhistorylistList" style="width: 100%">

				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="项目名称">
								<span>{{ props.row.title }}</span>
							</el-form-item>
							<el-form-item label="创建人">
								<span>{{ props.row.founder }}</span>
							</el-form-item>
							<el-form-item label="开始时间">
								<span>{{ props.row.stime }}</span>
							</el-form-item>
							<el-form-item label="结束时间">
								<span>{{ props.row.etime }}</span>
							</el-form-item>
							<el-form-item label="项目状态">
								<span>{{ props.row.yn }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="项目名称" prop="title" width="300px">
				</el-table-column>
				<el-table-column label="创建人" prop="founder">
				</el-table-column>
				<el-table-column label="开始时间" prop="stime">
				</el-table-column>
				</el-table-column>
				<el-table-column label="结束时间" prop="etime">
				</el-table-column>
				</el-table-column>
				<el-table-column label="项目状态" prop="yn">
				</el-table-column>
<el-table-column label="操作" width="250">
					<template slot-scope="scope">
						<el-button-group>
							<!-- 删除按钮 -->
							<el-button type="danger" icon="el-icon-delete "@click="removeById(scope.row.id)"></el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
		
		</el-card>

	</div>
</template>

<script>
	export default {
		created() {
			this.getNHistorylistList();
		},
		data() {
			return {
				queryInfo: {
					//和后端QueryInfo实体的属性一致
					query: '',
					pageNum: 1,
					pageSize: 5,
				},
				queryInfo1: {
					//和后端QueryInfo实体的属性一致
					id: JSON.parse(window.sessionStorage.getItem('user')).id,
					pageNum: 1,
					pageSize: 5,
				},
				nhistorylistList: [], //人员信息列表
				total: 0, //总记录数
				search: '', //查询表单数据
			}
		},
		methods: {
			async getNHistorylistList() {
	
				//console.log(this.queryInfo);
				const {
					data: resString
				} = await this.$http.get("nhistorylist", {
					params: this.queryInfo1
				}); //②接收后台返回的string数据： ①访问后台
				this.nhistorylistList = resString.nhistorylistList;
				},
			async removeById(id){
					console.log(id)
					//弹框询是否确定删除
					const confirmResult = await this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        },
				).catch(err => err)
		//如果确定删除，则返回值为字符串confirm
		//如果取消删除，则返回值为字符串cancel
		//console.log(confirmResult)
		if(confirmResult!=="confirm"){
			return this.$message.info('已取消删除');
		}
		const{data:spa} = await this.$http.delete("deletenhistorylist?id=" + id)
		console.log(spa);
			if(spa!=="ok"){
				return this.$message.error('删除笔记失败！');
			}
			this.$message.success('删除笔记成功！');
			this.getNHistorylistList();

			},
		
		}
	}
</script>

<style lang="less" scoped>
	.box {
		margin-bottom: 10px;

	}

	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}


	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
		margin: 10px;
	}
</style>
